<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :hot="hotCities" 
    :cities="cities"
    :letter ="letter"
    >
    </city-list>
    <city-alphabet :cities="cities" @change="change"></city-alphabet>
  </div>
</template>

<script>
import Axios from "axios";
import CityHeader from "./components/Header";
import CitySearch from "./components/Search";
import CityList from "./components/List";
import CityAlphabet from "./components/Alphabet";
export default {
  name: "City",
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },

  //数据
  data() {
    return {
      //热门城市
      hotCities: [],
      //城市
      cities: {},

      //侧边栏选中的字母
      letter: ''
    };
  },

  //方法
  methods: {
    //网络请求
    getCityInfo() {
      Axios.get("/api/city.json").then(this.handleGetCityInfoSucc);

      
    },

    handleGetCityInfoSucc(res) {
      res = res.data;
      
      console.log(res)
      if (res.ret && res.data) {
        const data = res.data;
        this.hotCities = data.hotCities;
        this.cities = data.cities;
      }
    },

   //侧边选择器回调方法
   change(e)
    {
        this.letter = e
      }


  },

  mounted() {
    this.getCityInfo();
  }
};
</script>

<style lang="stylus" scoped></style>